<!-- 三级分类页面 -->
<template>
  <div class="threeCate">
    <!-- 面包屑组件 -->
    <Bread>
      <BreadItem :to="'indexView'" @click.native="goHome()">首页</BreadItem>
      <BreadItem
        :to="'cateView'"
        @click.native="$router.push(`/cateView?id=${breadObj.oneCateId}`)"
        >{{ breadObj.oneCateName }}</BreadItem
      >
      <BreadItem>{{ breadObj.twoCateName }}</BreadItem>
    </Bread>
    <!-- 筛选分类 -->
    <div class="filter w">
      <div class="item">
        <div class="head">品牌：</div>
        <div class="body">
          <a
            href="javascript:;"
            v-for="item in brandAttr"
            :key="item.id"
            @click="setBrandId(item.id)"
            :class="item.id == obj.brandId ? 'bgc' : ''"
            >{{ item.name }}</a
          >
        </div>
      </div>
      <div class="item" v-for="(item, index) in attr" :key="item.id">
        <div class="head">{{ item.name }}：</div>
        <div class="body">
          <a
            href="javascript:;"
            @click="setAttr(item.name, i.name, i.id, index)"
            v-for="i in item.properties"
            :class="{ bgc: attrArr[index] && attrArr[index].id == i.id }"
            :key="i.id"
            >{{ i.name }}</a
          >
        </div>
      </div>
    </div>
    <!-- 筛选组件 -->
    <SubSort
      @setSortField="setSortField"
      @setSortPrice="setSortPrice"
    ></SubSort>
    <!-- 列表 -->
    <ThreeCateList :threeCateData="threeCateData"></ThreeCateList>
    <!-- 刷新的盒子 -->
    <Loading
      :loading="loading"
      :finished="finished"
      @getList="getThreeCateData"
    ></Loading>
  </div>
</template>

<script>
// 引入loading加载数据
import Loading from "./Loading.vue";
// 引入筛选组件
import SubSort from "@/components/Category/SubSort.vue";
// 引入api
import { getSubFilter, getThreeCate } from "@/utils/Api/CateApi";
// 引入面包屑组件
import Bread from "../utils/Bread.vue";
import BreadItem from "../utils/BreadItem.vue";
// 引入列表组件
import ThreeCateList from "@/components/Category/ThreeCateList.vue";
export default {
  // 注册组件
  components: {
    Bread,
    BreadItem,
    ThreeCateList,
    SubSort,
    Loading,
  },
  data() {
    return {
      // 三级分类数据
      threeCateData: [],
      //存储面包屑数据的变量
      breadObj: {
        oneCateName: null,
        twoCateName: null,
        oneCateId: null,
      },
      //品牌数据
      brandAttr: [],
      //规格数据
      attr: [],
      //后台需要的参数
      obj: {
        page: 1,
        pageSize: 20,
        categoryId: null,
        attrs: [],
        brandId: null,
        //排序的内容
        sortField: null,
        // 价格排序的内容
        sortMethod: null,
        // 只显示特惠商品
        onlyDiscount: false,
        // 是否有库存
        inventory: false,
      },
      // loading加载变量
      loading: false,
      // 请求数据完成的变量
      finished: false,
      // attr数据变量
      attrArr: [],
    };
  },
  mounted() {
    this.obj.categoryId = this.$route.query.id;
  },

  computed: {
    cate() {
      // 获取到vuex中分类的总数据
      return this.$store.state.Category.cate;
    },
  },
  watch: {
    // 监听路由跳转的时候调用获取面包屑数据的方法
    $route: {
      async handler() {
        this.SetBreadObj();
        await this.getSubFilterData();
        // 我们创建一个对象 都赋值为空
        let obj = {
          groupName: null,
          propertyName: null,
          id: null,
        };
        // 让定义的数组添加上和请求到的数组数据长度一样的数组 让点击属性的时候覆盖当前所在下标的对象
        for (var i = 0; i < this.attr.length; i++) {
          this.attrArr.push(obj);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 修改价格排序的值
    setSortPrice(isPrice) {
      this.obj.sortMethod = isPrice;
      this.obj.page = 1;
      this.obj.sortField = "price";
      this.threeCateData = [];
    },
    // 修改SortField值
    setSortField(sortField) {
      this.obj.sortField = sortField;
      this.obj.page = 1;
      this.obj.sortMethod = null;
      this.threeCateData = [];
    },
    // 设置规格属性
    // index是规格的下标
    setAttr(groupName, propertyName, id, index) {
      // 创建一个对象 接收传递下来的属性名和id
      let obj = {
        // 规格名
        groupName,
        // 属性名
        propertyName,
        // 属性id
        id,
      };
      // 赋值给当前数组规格的对象
      this.attrArr[index] = obj;
      // 初始化配置
      this.obj.page = 1;
      // 清空数据
      this.threeCateData = [];
      // 将点过的数据进行筛选 因为接口有空的就不会发起请求 所以筛选出有数据的
      this.obj.attrs = this.attrArr.filter((item) => {
        return item.id != null;
      });
      // 调用接口
      this.getThreeCateData();
    },
    // 存储品牌id
    setBrandId(id) {
      // 清空数据
      this.threeCateData = [];
      // 将页码改为1
      this.obj.page = 1;
      // 赋值
      this.obj.brandId = id;
      // 调用接口
      this.getThreeCateData();
    },
    // 跳转到首页
    goHome() {
      // 跳转到首页
      this.$router.push("/indexView");
      // 存储一下首页 让导航判断失去样式
      this.$store.commit("Category/setCateIndex", "首页");
    },
    // 请求三级分类数据列表的方法
    async getThreeCateData() {
      // 开启loading
      this.loading = true;
      let { data } = await getThreeCate(this.obj);
      if (data.result.items && data.result.items.length != 0) {
        // 合并数据
        this.threeCateData = [...this.threeCateData, ...data.result.items];
        // 加页码
        this.obj.page++;
      } else {
        // 没有数据了
        this.finished = true;
      }
      //在请求到数据都完事的时候关闭loading
      this.loading = false;
    },
    // 请求三级分类数据的方法
    async getSubFilterData() {
      let { data } = await getSubFilter(this.$route.query.id);
      //创建一个对象 添加到数据中通过判断id是否为全部
      let obj = {
        id: null,
        name: "全部",
      };
      //品牌
      this.brandAttr = data.result.brands;
      //添加数据
      this.brandAttr.unshift(obj);
      //规格
      this.attr = data.result.saleProperties;
      this.attr.forEach((item) => {
        item.properties.unshift(obj);
      });
    },
    // 根据传递过来的二级分类的id 获取到一级分类的名字 二级分类的名字 和一级分类的id
    SetBreadObj() {
      //循环遍历cate 在children中找到当前数据
      //因为forEach是无限循环的  所以用for循环
      for (var i = 0; i < this.cate.length; i++) {
        //通过传递的id 找到当前数据的下标
        let index = this.cate[i].children.findIndex((item) => {
          return item.id == this.$route.query.id;
        });
        // 如果index不等于-1
        if (index != -1) {
          // 找到数据给存储数据的变量进行赋值
          this.breadObj.twoCateName = this.cate[i].children[index].name;
          this.breadObj.oneCateName = this.cate[i].name;
          this.breadObj.oneCateId = this.cate[i].id;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  background: #fff;
  padding: 25px;
  .item {
    display: flex;
    line-height: 40px;
    .head {
      width: 80px;
      color: #999;
    }
    .body {
      flex: 1;
      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;
        &.active,
        &:hover {
          color: #27bb9a;
        }
      }
    }
  }
}
.bgc {
  color: #27bb9a;
}
</style>
